<template>

    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    :default-active="activeIndex2" text-color="#fff" @select="toPage">
                    <!-- <el-image src="/images/element-plus-logo.svg" fit="fill" /> -->
                    <!-- <span style="">家电维修</span> -->
                    <el-menu-item index="/index">
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>主页</span>
                    </el-menu-item>
                    <el-sub-menu index="1" v-if="loginInfo.role === 'root' || loginInfo.role === 'admin'">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>企业管理</span>
                        </template>
                        <el-menu-item-group title="人员管理">
                            <el-menu-item index="/emp">员工管理</el-menu-item>
                            <el-menu-item index="/user" v-if="loginInfo.role === 'root'">用户管理</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="部门管理" v-if="loginInfo.role === 'root'">
                            <el-menu-item index="/depat">业务管理</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="订单管理">
                            <el-menu-item index="/appoint">订单管理</el-menu-item>
                            <el-menu-item index="/part" v-if="loginInfo.role === 'root'">配件仓库</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="/task" v-if="loginInfo.role === 'admin'">
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>任务订单</span>
                    </el-menu-item>
                    <el-menu-item index="/processing" v-if="loginInfo.role === 'emp'">
                        <el-icon>
                            <CircleCheck />
                        </el-icon>
                        <span>处理订单</span>
                    </el-menu-item>
                    <el-menu-item index="/myOrder" v-if="loginInfo.role === 'user'">
                        <el-icon>
                            <CircleCheck />
                        </el-icon>
                        <span>我的订单</span>
                    </el-menu-item>
                    <el-menu-item index="/submitOrder" v-if="loginInfo.role === 'user'">
                        <el-icon>
                            <CircleCheck />
                        </el-icon>
                        <span>维修预约</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
                        <el-menu-item index="/index" style="width: 150px;">主页</el-menu-item>
                        <el-menu-item index="/avatar">
                            <el-avatar :size="50" :src="circleUrl" />
                        </el-menu-item>
                        <el-sub-menu index="/userInfo">
                            <template #title>{{ loginInfo.realName }}</template>
                            <el-menu-item index="/userInfo">个人信息</el-menu-item>
                            <el-menu-item index="/avatar">更换头像</el-menu-item>
                            <el-menu-item index="/password">修改密码</el-menu-item>
                            <el-menu-item index="/logout">退出登录</el-menu-item>
                            <el-sub-menu index="2-4">
                                <template #title>item four</template>
                                <el-menu-item index="2-4-1">item one</el-menu-item>
                                <el-menu-item index="2-4-2">item two</el-menu-item>
                                <el-menu-item index="2-4-3">item three</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <el-menu-item index="/myOrder" v-if="loginInfo.role === 'user'">我的订单</el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <RouterView :role="loginInfo.role" />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import userApi from '@/api/userApi';
import router from '@/router';
import { onMounted, ref, onBeforeMount, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'
import { tokenStore } from '@/stores/token';


// 登录信息
const loginInfo = ref({})
// 头像信息
const circleUrl = ref('');

// 
const userToken = tokenStore()


// start水平导航栏相关
// const activeIndex = ref('/index')
const activeIndex2 = ref('/index')
const handleSelect = (key, keyPath) => {
    activeIndex2.value = key;
    // console.log(key, keyPath)
    if (key === '/logout') {
        // sessionStorage.removeItem('token');
        userToken.setToken(null);
        sessionStorage.clear();
        router.push('/login');
    } else {
        router.push(key);
    }
}
// END水平导航栏相关

// 导航定向
const toPage = (indexPath) => {
    activeIndex2.value = indexPath;
    router.push(indexPath);
}
// 获得登录信息
const getLoginInfo = async () => {
    let resp = await userApi.getById(0);

    if (resp.code === 10000) {
        console.log(resp.data);
        sessionStorage.setItem("userDepartmentID", resp.data.departmentId);
        sessionStorage.setItem("userInfoUserId", resp.data.userId);
        sessionStorage.setItem("userRole", resp.data.role);
        loginInfo.value = resp.data;

        circleUrl.value = 'http://localhost:8080/images/' + resp.data.userAvatar;

        if (resp.data.userPhone === null) {
            ElMessage({
                message: '请完善个人信息',
                type: 'error',
            })
            router.push('/userInfo')
        }
    }
}
onBeforeMount(() => {
    getLoginInfo();
})
</script>
<style scoped>
.el-header {
    padding: 0;
    margin: 0;
    background-color: #545c64;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}
</style>